<template>
  <div class="containerPG">
    <!-- 顶部区域 -->
    <div class="topArea">
      <!-- 标题 -->
      <div class="title">已审核数据资源</div>
      <!-- 数据展示 -->
      <div class="showData" style="color: #566ce9">
        <div class="block">
          <div class="title">M01-装备资产价值</div>
          <!-- <div class="count">营有风</div> -->
        </div>
        <div class="block">
          <div class="title">装备总数</div>
          <div class="count">888</div>
        </div>
        <div class="block">
          <div class="title">关键装备占比</div>
          <div class="count">70%</div>
        </div>
        <div class="block">
          <div class="title">装备更新率</div>
          <div class="count">60%</div>
        </div>
        <div class="block">
          <div class="title">维护成本</div>
          <div class="count">1000000元</div>
        </div>
        <div class="block">
          <div class="title">使用寿命</div>
          <div class="count">4年</div>
        </div>
        <div class="block">
          <div class="title">装备种类丰富度</div>
          <div class="count">丰富</div>
        </div>
        <div class="block">
          <div class="title">与作战体系适配度</div>
          <div class="count">适配</div>
        </div>
      </div>
      <div class="showData">
        <div class="block">
          <div class="title">M02-房地资产价值</div>
          <!-- <div class="count">测量OMI</div> -->
        </div>
        <div class="block">
          <div class="title">战略位置重要性</div>
          <div class="count">重要</div>
        </div>
        <div class="block">
          <div class="title">周边环境安全性</div>
          <div class="count">安全</div>
        </div>
        <div class="block">
          <div class="title">交通便捷程度</div>
          <div class="count">便捷</div>
        </div>
        <div class="block">
          <div class="title">水电供应稳定性</div>
          <div class="count">稳定</div>
        </div>
        <div class="block">
          <div class="title">通信设施完备性</div>
          <div class="count">完备</div>
        </div>
        <div class="block">
          <div class="title">房屋结构坚固性</div>
          <div class="count">坚固</div>
        </div>
        <div class="block">
          <div class="title">建筑材料耐久性</div>
          <div class="count">20年</div>
        </div>
      </div>
      <div class="showData">
        <div class="block">
          <div class="title">M03-无形资产价值</div>
          <!-- <div class="count">营销云 MC</div> -->
        </div>
        <div class="block">
          <div class="title">荣誉与声望指标</div>
          <div class="count">历史荣誉</div>
        </div>
        <div class="block">
          <div class="title">军事文化指标</div>
          <div class="count">核心价值观</div>
        </div>
        <div class="block">
          <div class="title">军事品牌指标</div>
          <div class="count">知名度</div>
        </div>
        <div class="block">
          <div class="title">人才培养指标</div>
          <div class="count">人才输出率</div>
        </div>
        <div class="block">
          <div class="title">军事技术指标</div>
          <div class="count">技术创新成果</div>
        </div>
        <div class="block">
          <div class="title">战略规划指标</div>
          <div class="count">规划前瞻性</div>
        </div>
        <div class="block">
          <div class="title">情报与信息指标</div>
          <div class="count">收集能力</div>
        </div>
      </div>
    </div>
    <!-- 底部区域 -->
    <div class="bottomArea">
      <!-- 标题 -->
      <div class="title">数据资源画像</div>
      <div class="chartArea">
        <div class="chart1">
          <div id="chart11" style="width: 100%;height: 60%;"></div>
        </div>
        <div class="chart2">
          <div id="chart22" style="width: 100%;height: 60%;"></div>
        </div>
        <div class="chart3">
          <div id="chart33" style="width: 100%;height: 60%;"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Radar } from "@antv/g2plot";
export default {
  mounted() {
    this.createChart1()
    this.createChart2()
    this.createChart3()
  },
  methods: {
    createChart1() {
      // 数据更新于 2021.01.09
      const data = [
        { name: "装备种类与数量", star:  1000 },
        { name: "装备性能参数", star: 1000 },
        { name: "装备服役年限", star: 1000 },
      ];
      const radarPlot = new Radar("chart11", {
        data: data.map((d) => ({ ...d, star: Math.sqrt(d.star) })),
        xField: "name",
        yField: "star",
        meta: {
          star: {
            min: 0,
            nice: true,
          },
        },
        area: {},
      });
      radarPlot.render();
    },
    createChart2() {
      // 数据更新于 2021.01.09
      const data = [
        { name: "人员数量与结构", star:  100 },
        { name: "人员素质", star: 90 },
        { name: "人员培训与发展", star: 100 },
        { name: "人员战斗经验", star: 90 },
        { name: "人员士气与凝聚力", star: 90 },
      ];
      const radarPlot = new Radar("chart22", {
        data: data.map((d) => ({ ...d, star: Math.sqrt(d.star) })),
        xField: "name",
        yField: "star",
        meta: {
          star: {
            min: 0,
            nice: true,
          },
        },
        area: {},
      });
      radarPlot.render();
    },
    createChart3() {
      // 数据更新于 2021.01.09
      const data = [
        { name: "部队荣誉与声望", star:   1 },
        { name: "军事文化价值", star: 2 },
        { name: "情报与信息资源", star: 1 },
        { name: "战略规划能力", star: 2 },
        { name: "合作与联盟价值", star: 1 },
      ];
      const radarPlot = new Radar("chart33", {
        data: data.map((d) => ({ ...d, star: Math.sqrt(d.star) })),
        xField: "name",
        yField: "star",
        meta: {
          star: {
            min: 0,
            nice: true,
          },
        },
        area: {},
      });
      radarPlot.render();
    },
  },
};
</script>

<style scoped>
/* 整体区域样式 */
.containerPG {
  width: 100%;
  height: 100vh;
  background-color: #f0f2f5;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  overflow: auto;
}
.title {
  padding: 10px;
  font-weight: bolder;
}
/* 顶部区域样式 */
.topArea {
  width: 96%;
  height: 48vh;
  background-color: white;
}
/* 底部区域样式 */
.bottomArea {
  width: 96%;
  height: 48vh;
  background-color: white;
}
/* 左上数据区域样式 */
.showData {
  padding: 5px;
  margin: 5px;
  display: flex;
  justify-content: space-around;
  border-bottom: 1px solid #d9d9d9;
  margin-top: 10px;
}
.showData .block {
  font-size: 14px;
  display: inline-block;
  text-align: center;
  padding: 5px;
  width: 10%;
  text-align: center;
}
.showData .block:nth-child(n + 2) {
  border-left: 1px solid #d9d9d9;
}
/* 底部图表区域样式 */
.chartArea {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.chartArea div {
  margin-top: -10px;
  width: 40%;
  height: 86%;
  /* background-color: white; */
}
.chart1,.chart2, .chart3{
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
